<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <p>所有库存的商品：</p>
    <ul>
        <li v-for="item in nameList">
            {{item}}
        </li>
    </ul>
    <p>产地为上海的商品：</p>
    <ul>
        <li v-for="item in namelists">
            {{item}}
        </li>
    </ul>
    <p>价格大于或等于5000元的商品：</p>
    <ul>
        <li v-for="item in prices()">
            {{item}}
        </li>
    </ul>
</div>

<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                nameList: [
                    {name: "洗衣机", price: "5000", city: "上海"},
                    {name: "冰箱", price: "6800", city: "北京"},
                    {name: "空调", price: "4600", city: "深圳"},
                    {name: "电视机", price: "4900", city: "上海"},
                ]
            }
        },
        computed:{ //计算属性
            namelists: function(){
                return this.nameList.filter(function (nameList) {
                    return nameList.city === "上海";
                })
            }
        },
        methods: { //方法
            prices:function() {
                return this.nameList.filter(function (nameList) {
                    return nameList.price>=5000;
                })
            }
        }
    }).mount('#app');

</script>
</body>
</html>
